<template>
	<view class="">
		<view class="select-box">
			<sun-dropDown style="width: 90%;" v-on:onSubmitAddress="onSubmitAddress"></sun-dropDown>
		</view>
		<view class="query-box f-row-Hcenter f-row-between">
			<view class="input-box f-row-Hcenter f-row-between">
				<input type="text" v-model="bar_no" placeholder="请输入货号/条码/商品名称" />
				<view class="query-block f-row-Hcenter" @click="onQuery">
					<view class="query icons iconchazhaochaxun">
					</view>
				</view>
			</view>
			<view class="Qrcode icons iconsaomiao" @click="onQrcode"></view>
		</view>
		<view class="money-block f-center">
			<view class="money-item f-center" :class=" minmax_type == 0 ? 'selected':''" :style="{ width: 100 / 2 - 3 + '%' }"
			 @click="onminmax_type(0)">
				库存不足
			</view>
			<view class="money-item f-center" :class=" minmax_type == 1 ? 'selected':''" :style="{ width: 100 / 2 - 3 + '%' }"
			 @click="onminmax_type(1)">
				库存积压
			</view>
		</view>
		<view class="tietle-box">
			<sun-tietleBox :tietleData="'库存列表'" :showLine="false"></sun-tietleBox>
		</view>
		<view v-show="minmax_type == 0" :id="idTopHeight" class="f-row-Wcenter" :style="{ padding: 0 + ' ' + tableMargin + 'rpx' }">
			<wyb-table v-show="minmax_type == 0" ref="table" :width="'710rpx'" :defaultColWidth="defaultColWidth" :headers="headers"
			 :contents="resData.list" :header-bg-color="'#128A80'" :header-ft-color="'#ffffff'" :loading="false" :maxHeight="topHeight - 10 - tableMargin * 2  +'rpx'"
			 :scrollHeight=" topHeight - 75 - tableMargin * 2  " :first-line-fixed="false" :min-height="[65, 50]" @onlower="onlower" />
		</view>
		<view v-show="minmax_type == 1" :id="idTopHeight" class="f-row-Wcenter" :style="{ padding: 0 + ' ' + tableMargin + 'rpx' }">

			<wyb-table ref="table" :width="'710rpx'" :defaultColWidth="defaultColWidth" :headers="headers2" :contents="resData.list2"
			 :header-bg-color="'#128A80'" :header-ft-color="'#ffffff'" :loading="false" :first-line-fixed="false" :min-height="[65, 50]"
			 :maxHeight="topHeight - 10 - tableMargin * 2  +'rpx'" :scrollHeight=" topHeight - 75 - tableMargin * 2  " @onlower="onlower2" />
		</view>
	</view>
</template>

<script>
	import sunDropDown from '@/components/sun-dropDown/sun-dropDown.vue';
	import sunTietleBox from '@/components/sun-titleBox/sun-tietleBox.vue';
	export default {
		components: {
			sunDropDown,
			sunTietleBox
		},
		data() {
			return {
				//表格
				headers: [{
						label: '条码',
						key: 'item_barcode',

					},
					{
						label: '商品名称',
						key: 'item_name',
						width: 260,
						widthInit: 260
					},
					{
						label: '库存下限',
						key: 'minmax_qty'
					},
					{
						label: '不足数量',
						key: 'qty'
					}
				],
				headers2: [{
						label: '条码',
						key: 'item_barcode',
					},
					{
						label: '商品名称',
						key: 'item_name',
						width: 260,
						widthInit: 260
					},
					{
						label: '库存上限',
						key: 'minmax_qty'
					},
					{
						label: '积压数量',
						key: 'qty'
					}
				],
				defaultColWidth: 0,
				idTopHeight: 'table-box',
				tableMargin: 20,
				topHeight: 100,

				resData: {
					list: [],
					list2: []
				},
				//查询
				bar_no: '',
				minmax_type: 0,
				query: {
					bar_no: '', //varchar(30) 商品货号/名称/条码 以前导查询条件，使用XXX%的方式查询 
					ischange: true, // 是 bool 请求参数是否修改，如果为false证明文档中的参数没修改，就不查询count，反之查询新的count
					branch_no: '', // 是 varchar(6) 仓库编号 上下限是以仓库来定义的，目前这个参数可以传门店号，内部会自动按仓库来处理 
					minmax_type: 0, // 是 char(1) 预警类型 0库存不足、1库存积压 

					pageindex: 1, // 是 int 页号
					pagesize: 9, // 是 int 页大小 如果想一次性查询全部时，此参传入999999
					toastTitle: '',
					totalPage: 1 //总页码(前端算)
				},
				query2: {
					bar_no: '', //varchar(30) 商品货号/名称/条码 以前导查询条件，使用XXX%的方式查询 
					ischange: true, // 是 bool 请求参数是否修改，如果为false证明文档中的参数没修改，就不查询count，反之查询新的count
					branch_no: '', // 是 varchar(6) 仓库编号 上下限是以仓库来定义的，目前这个参数可以传门店号，内部会自动按仓库来处理 
					minmax_type: 0, // 是 char(1) 预警类型 0库存不足、1库存积压 

					pageindex: 1, // 是 int 页号
					pagesize: 9, // 是 int 页大小 如果想一次性查询全部时，此参传入999999
					toastTitle: '',
					totalPage: 1 //总页码(前端算)
				}
			};
		},
		onLoad() {
			//表格
			this.$util.getDefaultColWidth(this, 710, 'headers', 'defaultColWidth');
		},
		mounted() {
			//表格
			this.$util.getTopHeight(this, this.idTopHeight, this.tableMargin);
		},
		computed: {
			userInfo() {
				var userInfo = this.$store.getters.getUserInfo;
				this.query.branch_no = userInfo.branch_default + '01';
				this.query2.branch_no = userInfo.branch_default + '01';
				return userInfo;
			}
		},
		methods: {
			onQuery() {
				if (this.minmax_type == 0) {
					this.query.bar_no = this.bar_no + '%';
					this.query.minmax_type = this.minmax_type;
					this.query.branch_no = this.query.branch_no == true ? this.query.branch_no : this.userInfo.branch_default + '01';
				} else {
					this.query2.bar_no = this.bar_no + '%';
					this.query2.minmax_type = this.minmax_type;
					this.query2.branch_no = this.query2.branch_no == true ? this.query2.branch_no : this.userInfo.branch_default +
						'01';
				}
				this.getlogin();
			},
			onQrcode() {
				// 允许从相机和相册扫码
				uni.scanCode({
					success: (res) => {
						this.query.bar_no = res.result + '%';
						this.getlogin();
					}
				});
			},
			//选择分店
			onSubmitAddress(e) {
				if (this.minmax_type == 0) {
					this.query.bar_no = this.bar_no + '%';
					this.query.minmax_type = this.minmax_type;
					this.query.branch_jg = e.address.branch_no;
					this.query.branch_no = e.address.branch_no + '01';
					this.query.branch_name = e.address.branch_name;
				} else {
					this.query2.bar_no = this.bar_no + '%';
					this.query2.minmax_type = this.minmax_type;
					this.query2.branch_jg = e.address.branch_no;
					this.query2.branch_no = e.address.branch_no + '01';
					this.query2.branch_name = e.address.branch_name;
				}
				this.getlogin();
			},
			onminmax_type(type) {

				this.minmax_type = type;

				if (this.minmax_type == 0) {
					this.query.bar_no = this.bar_no + '%';
					this.query.minmax_type = this.minmax_type;
					this.query.branch_no = this.query.branch_no == true ? this.query.branch_no : this.userInfo.branch_default + '01';
				} else {
					this.query2.bar_no = this.bar_no + '%';
					this.query2.minmax_type = this.minmax_type;
					this.query2.branch_no = this.query2.branch_no == true ? this.query2.branch_no : this.userInfo.branch_default +
						'01';

				}
				this.getlogin();
			},

			getlogin(isMore) {
				let query = {};
				if (this.minmax_type == 0) {
					this.query.bar_no = this.bar_no + '%';
					this.query.minmax_type = this.minmax_type;
					query = this.query;
				} else {
					this.query2.bar_no = this.bar_no + '%';
					this.query2.minmax_type = this.minmax_type;
					query = this.query2;
				}

				this.$api_server.dwzy_GetAppStockMinMaxAnalysis({
					data: query,
					success: res => {
						if (res.data) {
							//收银合计
							let query = {};
							if (this.minmax_type == 0) {
								query = this.query;
							} else {
								query = this.query2;
							}

							//汇总（没有汇总）



							if (this.minmax_type == 0) {
								//数据列表
								if (query.pageindex == 1) {
									this.resData.list = res.data.data.appstockminmaxlist;
								} else {
									this.resData.list = [...this.resData.list, ...res.data.data.appstockminmaxlist];
								}
							} else {
								//数据列表
								if (query.pageindex == 1) {
									this.resData.list2 = res.data.data.appstockminmaxlist;
								} else {
									this.resData.list2 = [...this.resData.list2, ...res.data.data.appstockminmaxlist];
								}
							}

							//分页
							let listlength = this.resData.list.length;
							let totalCount = res.data.data.appstockminmaxcount.rec_tot;
							//取整
							query.totalPage = Math.ceil(totalCount / query.pagesize);

							if (listlength > 0) {
								if (listlength >= totalCount) {
									query.toastTitle = '没有更多了!';
								} else {
									query.toastTitle = '加载更多...';
								}
							} else {
								query.toastTitle = '没有更多了!';
							}

							if (this.minmax_type == 0) {
								this.query = query;
							} else {
								this.query2 = query;
							}
						}
					},
					fail(error) {
						console.log('rerror>>>', error);
					}
				});
			},
			toPage(item) {
				item = {
					item,
					query: this.query
				};
				uni.navigateTo({
					url: '/pages/store/storeDet?data=' + JSON.stringify(item)
				});
			},
			// 下拉刷新
			onlower(e) {
				this.query.pageindex++;
				if (this.query.pageindex > this.query.totalPage) {
					return;
				}
				this.query.toastTitle = '加载中...';

				this.getlogin('more');
			},
			onlower2(e) {
				this.query2.pageindex++;
				if (this.query2.pageindex > this.query2.totalPage) {
					return;
				}
				this.query2.toastTitle = '加载中...';
				this.getlogin('more');
			}
		}
	};
</script>

<style scoped lang="scss">
	.select-box {
		margin: 0 20upx;
	}

	.query-box {
		padding: 20upx 20upx;

		background-color: #FFFFFF;
		border-radius: 20upx 20upx 0upx 0upx;

		.input-box {
			margin-top: 20upx;
			border: 1upx solid #d7d7d7;
			background: rgba(255, 255, 255, 1);
			border-radius: 100upx;
			height: 65upx;
			width: 100%;

			input {
				margin: 0 20upx;
				width: 100%;
			}

			.query {
				margin-right: 20upx;
				font-size: 35upx;
				font-weight: 600;
				color: rgba(118, 118, 118, 1.0);
			}

		}

		.Qrcode {
			margin-top: 20upx;
			margin-left: 20upx;
			font-size: 55upx;

		}

	}

	.tietle-box {
		margin: 0 20upx;
	}

	.money-block {
		padding: 20upx 20upx 40upx 20upx;
		background-color: #ffffff;
		border-radius: 0upx 0upx 20upx 20upx;

		.money-item {
			border-radius: 10000upx;
			padding: 20upx;
			box-shadow: 2rpx 2rpx 15rpx rgba(224, 32, 32, 0.2);
			color: rgba(22, 22, 22, 1.0);
			font-weight: 600;
			font-size: 28upx;
			border: 1upx solid #d7d7d7;
		}

		.selected {
			background-color: #717171 !important;
			color: #FFFFFF;
		}

		.money-item:nth-of-type(1) {
			background-color: #FFFFFF;
		}

		.money-item:nth-of-type(2) {
			margin-left: 40upx;
			background-color: #FFFFFF;
		}

	}

	.toastTitle {
		width: 100%;
		text-align: center;
		color: rgba(216, 216, 216, 0.9);
	}
</style>
